html,
body {
  height: 100%;
  width: 100%;
}
.btn:active {
  filter: brightness(2);
}
#primary {
  height: 100%;
  width: 100%;
  background: url(images/big_bg/lobby_bg.jpg) no-repeat center / cover;
}
#primary .fix_left_lobby {
  position: absolute;
  top: 0%;
  left: -3.226555%;
  height: 100%;
  width: 8.328125%;
  background: url(images/fixscreens/fix_left_lobby.png) no-repeat center / 100% 100%;
}
#primary .head {
  position: absolute;
  top: 0%;
  left: 0%;
  height: 17.64705882%;
  width: 100%;
  z-index: 10;
}
#primary .head .lobby_userinfo_bg2 {
  display: flex;
  position: absolute;
  justify-content: center;
  top: -2%;
  left: 5%;
  width: 34%;
  height: 104%;
  background: url(images/lobbyui1/lobby_userinfo_bg2.png) no-repeat center / 100% 100%;
}
#primary .head .lobby_userinfo_bg2 #sex {
  position: absolute;
  top: 2%;
  left: 24%;
  width: 6.4%;
  height: 24%;
  background: url(images/publicui1/pubui_icon_male.png) no-repeat center / 100% 100%;
}
#primary .head .lobby_userinfo_bg2 #name {
  margin-top: 2.3%;
  margin-right: 25%;
  font-family: shousha;
  color: #a4a19d;
  font-size: 1rem;
}
#primary .head .lobby_userinfo_bg2 #Lv {
  position: absolute;
  top: 8.8%;
  right: 32%;
  font-family: "shousha";
  color: #917916;
  font-size: 0.8rem;
}
#primary .head .lobby_userinfo_bg2 #better {
  position: absolute;
  top: 2%;
  right: 13%;
  width: 16.4%;
  height: 27%;
  background: url(images/lobbyui1/more_better_gray.png) no-repeat center / 100% 100%;
}
#primary .head .lobbyui_item_vip {
  position: absolute;
  top: 5%;
  left: 38%;
  width: 12%;
  height: 35%;
  background: url(images/lobbyui1/lobby_top_btn1.png) no-repeat center / 100% 100%;
}
#primary .head .lobbyui_item_vip .data {
  position: absolute;
  top: 14%;
  left: 28%;
  width: 39%;
  height: 80%;
  background: url(vip/vip0.png) no-repeat center / 100% 100%;
}
#primary .head .lobbyui_item_vip .off {
  filter: grayscale(1);
}
#primary .head .lobbyui_item_vip .pub_btn_plus {
  position: absolute;
  top: -2%;
  left: 66%;
  width: 24%;
  height: 102%;
  background: url(images/publicui1/pub_btn_plus.png) no-repeat center / 100% 100%;
}
#primary .head .lobbyui_item_yuanbao {
  display: flex;
  position: absolute;
  justify-content: center;
  align-items: center;
  top: 6%;
  left: 51%;
  width: 12%;
  height: 35%;
  background: url(images/lobbyui1/lobby_top_btn1.png) no-repeat center / 100% 100%;
}
#primary .head .lobbyui_item_yuanbao .icon {
  position: absolute;
  top: 11%;
  left: 9%;
  width: 20%;
  height: 74%;
  background: url(images/lobbyui1/lobbyui_item_yuanbao.png) no-repeat center / 100% 100%;
}
#primary .head .lobbyui_item_yuanbao .data {
  font-size: 1rem;
  color: #c1bfb7;
}
#primary .head .lobbyui_item_yuanbao .pub_btn_plus {
  position: absolute;
  top: -2%;
  left: 66%;
  width: 24%;
  height: 102%;
  background: url(images/publicui1/pub_btn_plus.png) no-repeat center / 100% 100%;
}
#primary .head #lobbyui_btn_notice {
  position: absolute;
  top: 4%;
  right: 19%;
  height: 54%;
  width: 6%;
  background: url(images/lobbyui1/lobbyui_btn_bg2.png) no-repeat center / contain, url(images/lobbyui4/lobbyui_btn_notice.png) no-repeat center / cover;
}
#primary .head #lobbyui_btn_week_month_card {
  position: absolute;
  top: 4%;
  right: 13.4%;
  height: 54%;
  width: 6%;
  background: url(images/lobbyui1/lobbyui_btn_bg2.png) no-repeat center / contain, url(images/lobbyui4/lobbyui_btn_week_month_card.png) no-repeat center / cover;
}
#primary .head #lobbyui_btn_dailygift {
  position: absolute;
  top: 4%;
  right: 7.6%;
  height: 54%;
  width: 6%;
  background: url(images/lobbyui1/lobbyui_btn_bg2.png) no-repeat center / contain, url(images/lobbyui4/lobbyui_btn_dailygift.png) no-repeat center / cover;
}
#primary .head #lobbyui_btn_email {
  position: absolute;
  top: 4%;
  right: 2%;
  height: 54%;
  width: 6%;
  background: url(images/lobbyui1/lobbyui_btn_bg2.png) no-repeat center / contain, url(images/lobbyui4/lobbyui_btn_email.png) no-repeat center / cover;
}
#primary .left {
  position: absolute;
  top: 3%;
  left: 5.756568%;
  height: 100%;
  width: 8.7890625%;
}
#primary .left .activity_mode_part {
  position: absolute;
  top: 6.59695%;
  left: 31.555556%;
  height: 67.287582%;
  width: 2.92222222%;
  background-color: #5a2a23;
}
#primary .left #lobby_btn24_gonghui {
  position: absolute;
  top: 15.90413943%;
  left: 0%;
  height: 12.41830065%;
  width: 63.33333333%;
  margin-top: -16%;
  background: url(images/lobbyui4/lobby_btn24_gonghui.png) no-repeat center / contain;
}
#primary .left #lobby_btn24_haoyou {
  position: absolute;
  top: 28.75816993%;
  left: 0%;
  height: 12.41830065%;
  width: 63.33333333%;
  margin-top: -16%;
  background: url(images/lobbyui4/lobby_btn24_haoyou.png) no-repeat center / contain;
}
#primary .left #lobby_btn24_shortvideo {
  position: absolute;
  top: 41.61220044%;
  left: 0%;
  height: 12.41830065%;
  width: 63.33333333%;
  margin-top: -20%;
  background: url(images/lobbyui4/lobby_btn24_shortvideo.png) no-repeat center / contain;
}
#primary .left #lobby_btn24_bisai {
  position: absolute;
  top: 54.90196078%;
  left: 0%;
  height: 12.41830065%;
  width: 63.33333333%;
  margin-top: -26%;
  background: url(images/lobbyui4/lobby_btn24_bisai.png) no-repeat center / contain;
}
#primary .left #lobby_enter_lm_switch {
  position: absolute;
  top: 62%;
  left: 9%;
  height: 10%;
  width: 45%;
  background: url(images/lobbyui4/lobby_enter_lm_switch.png) no-repeat;
  background-size: contain;
}
#primary .left .lobby_enter_guahui_ic {
  position: absolute;
  top: 69%;
  left: 12.7%;
  height: 19%;
  width: 22%;
  background: url(images/lobbyui4/lobby_enter_guahui_ic.png) no-repeat;
  background-size: contain;
}
#primary .bottom {
  position: absolute;
  bottom: 0%;
  left: 0%;
  height: 19.82570806%;
  width: 100%;
}
#primary .bottom #liaotian {
  position: absolute;
  bottom: 0%;
  left: -2%;
  height: 92.010989%;
  width: 16.961501%;
  background: url(images/liaotian.png) no-repeat left bottom;
  background-size: contain;
}
#primary .bottom .lobby_lb_enter_bg {
  position: absolute;
  top: 28%;
  left: 13.6%;
  height: 69.736264%;
  width: 28.755823%;
  background: url(images/lobbyui4/lobby_lb_enter_bg.png) no-repeat center / 100% 100%;
}
#primary .bottom .lobby_lb_enter_bg #lobby_lb_enter_mzhl_ic {
  position: absolute;
  top: 11%;
  left: 4.5%;
  height: 74%;
  width: 42.8%;
  background: url(images/lobbyui4/lobby_lb_enter_mzhl_ic.png) no-repeat center / 100% 100%;
}
#primary .bottom .lobby_lb_enter_bg #lobby_lb_enter_qzyg_ic {
  position: absolute;
  top: -2.5%;
  left: 53%;
  height: 95%;
  width: 45%;
  background: url(images/lobbyui4/lobby_lb_enter_qzyg_ic.png) no-repeat center / 100% 100%;
}
#primary .bottom #grow {
  position: absolute;
  top: 38%;
  left: 54%;
  height: 50%;
  width: 6%;
  background: url(images/lobbyui1/lobbyui_btn_bg2.png) no-repeat center / contain, url(icon/4035.png) no-repeat center / cover;
}
#primary .bottom #mall {
  position: absolute;
  top: 38%;
  left: 60%;
  height: 50%;
  width: 6%;
  background: url(images/lobbyui1/lobbyui_btn_bg2.png) no-repeat center / contain, url(icon/4025.png) no-repeat center / cover;
}
#primary .bottom #gratia {
  position: absolute;
  top: 38%;
  left: 65.8%;
  height: 50%;
  width: 6%;
  background: url(images/lobbyui1/lobbyui_btn_bg2.png) no-repeat center / contain, url(icon/4002.png) no-repeat center / cover;
}
#primary .bottom #rank {
  position: absolute;
  top: 37%;
  left: 72%;
  height: 54%;
  width: 6%;
  background: url(images/lobbyui1/lobbyui_btn_bg2.png) no-repeat center / contain, url(icon/4028.png) no-repeat center / cover;
}
#primary .bottom #skin {
  position: absolute;
  top: 38%;
  left: 78%;
  height: 53%;
  width: 6%;
  background: url(images/lobbyui1/lobbyui_btn_bg2.png) no-repeat center / contain, url(icon/4009.png) no-repeat center / cover;
}
#primary .bottom #character {
  position: absolute;
  top: 38%;
  left: 84%;
  height: 53%;
  width: 6%;
  background: url(images/lobbyui1/lobbyui_btn_bg2.png) no-repeat center / contain, url(icon/4008.png) no-repeat center / cover;
}
#primary .bottom #pub_corner_bg {
  position: absolute;
  bottom: 0%;
  right: -3.7%;
  height: 100%;
  width: 15%;
  background: url(images/publicui1/pub_corner_bg.png) no-repeat center / 100% 100%;
}
#primary .bottom #pub_corner_bg #pubbtn_menu {
  position: absolute;
  bottom: 16%;
  left: 20%;
  height: 41%;
  width: 26%;
  background: url(images/publicui1/pubbtn_menu.png) no-repeat center / 100% 100%;
}
#primary .right {
  position: absolute;
  top: 12%;
  right: 0%;
  height: 64%;
  width: 10%;
}
#primary .right #lobby_btn_guangbao_bg {
  position: absolute;
  top: 6%;
  right: 30%;
  height: 64%;
  width: 78%;
  background: url(images/lobbyui2/lobby_btn_guangbao_bg.png) no-repeat center / 100% 100%;
}
#primary .right #lobby_btn_guangbao_bg .ad_space_default {
  position: absolute;
  top: -0.4%;
  right: -0.9%;
  height: 101%;
  width: 101%;
  background: url(pic/ad_space_default.png) no-repeat center / 100% 100%;
}
#primary .right #lobby_btn24_tzl {
  position: absolute;
  bottom: 12%;
  left: 8%;
  height: 19%;
  width: 45%;
  background: url(images/lobbyui4/lobby_btn24_tzl.png) no-repeat center / contain;
}
#primary .right #lobby_btn_xinshoubibei {
  position: absolute;
  bottom: -9%;
  left: -4%;
  height: 25%;
  width: 64%;
  background: url(images/lobbyui2/lobby_btn_xinshoubibei.png) no-repeat center / contain;
}
#primary #lobby_mode_jindian_01 {
  position: absolute;
  top: 17%;
  left: 13%;
  height: 65%;
  width: 26%;
  background: url(images/lobbyui4/lobby_mode_jindian_01.png) no-repeat;
  background-position: center;
  background-size: 100% 100%;
}
#primary #lobby_mode_jindian_01 #lobby_mode_jindian_02 {
  position: absolute;
  top: 0%;
  left: 0%;
  height: 100%;
  width: 100%;
  background: url(images/lobbyui4/lobby_mode_jindian_02.png) no-repeat;
  background-position: center;
  background-size: 100% 100%;
}
#primary #lobby_mode_jindian_01 #lobby_mode_jindian_02 #lobby_mode_jindian_03 {
  position: absolute;
  bottom: 3%;
  left: 2.6%;
  height: 15.5%;
  width: 95%;
  background: url(images/lobbyui4/lobby_mode_jindian_03.png) no-repeat;
  background-position: center;
  background-size: 100% 100%;
}
#primary #lobby_mode_paiwei_01 {
  position: absolute;
  top: 17%;
  left: 41%;
  height: 64.6%;
  width: 19%;
  background: url(images/lobbyui4/lobby_mode_paiwei_01.png) no-repeat center / 100% 100%;
}
#primary #lobby_mode_paiwei_01 #lobby_mode_paiwei_02 {
  position: absolute;
  top: 0%;
  left: 0%;
  height: 100%;
  width: 100%;
  background: url(images/lobbyui4/lobby_mode_paiwei_02.png) no-repeat center / 100% 100%;
}
#primary #lobby_mode_paiwei_01 #lobby_mode_paiwei_02 #lobby_mode_paiwei_03 {
  position: absolute;
  bottom: 3%;
  left: 2.6%;
  height: 15.5%;
  width: 95%;
  background: url(images/lobbyui4/lobby_mode_paiwei_03_1.png) no-repeat center / 100% 100%;
}
#primary #lobby_mode_doudizhu_01 {
  position: absolute;
  top: 17%;
  left: 62%;
  height: 32.6%;
  width: 25.3%;
  background: url(images/lobbyui4/lobby_mode_doudizhu_01.png) no-repeat center / 100% 100%;
}
#primary #lobby_mode_doudizhu_01 #lobby_mode_doudizhu_02 {
  position: absolute;
  top: 0%;
  left: 0%;
  height: 100%;
  width: 100%;
  background: url(images/lobbyui4/lobby_mode_doudizhu_02.png) no-repeat center / 100% 100%;
}
#primary #lobby_mode_doudizhu_01 #lobby_mode_doudizhu_02 #lobby_mode_doudizhu_03 {
  position: absolute;
  bottom: 2%;
  left: 0.6%;
  height: 37.5%;
  width: 98%;
  background: url(images/lobbyui4/lobby_mode_doudizhu_03.png) no-repeat center / 100% 100%;
}
#primary #lobby_mode_huodong_01 {
  position: absolute;
  top: 51%;
  left: 62%;
  height: 30.6%;
  width: 9%;
  background: url(images/lobbyui4/lobby_mode_huodong_01.png) no-repeat center / 100% 100%;
}
#primary #lobby_mode_huodong_01 #lobby_mode_huodong_02 {
  position: absolute;
  top: 0%;
  left: 0%;
  height: 100%;
  width: 100%;
  background: url(images/lobbyui4/lobby_mode_huodong_02.png) no-repeat center / 100% 100%;
}
#primary #lobby_mode_huodong_01 #lobby_mode_huodong_02 #lobby_mode_huodong_03 {
  position: absolute;
  bottom: 2%;
  left: 0.6%;
  height: 37.5%;
  width: 98%;
  background: url(images/lobbyui4/lobby_mode_huodong_03.png) no-repeat center / 100% 100%;
}
#primary #lobby_mode_legend_01 {
  position: absolute;
  top: 51%;
  left: 71%;
  height: 30.6%;
  width: 16%;
  background: url(images/lobbyui4/lobby_mode_legend_01.png) no-repeat center / 100% 100%;
}
#primary #lobby_mode_legend_01 #lobby_mode_legend_02 {
  position: absolute;
  top: 0%;
  left: 0%;
  height: 100%;
  width: 100%;
  background: url(images/lobbyui4/lobby_mode_legend_02.png) no-repeat center / 100% 100%;
}
#primary #lobby_mode_legend_01 #lobby_mode_legend_02 #lobby_mode_legend_03 {
  position: absolute;
  bottom: 5%;
  left: -1.4%;
  height: 34.5%;
  width: 103%;
  background: url(images/lobbyui4/lobby_mode_legend_03.png) no-repeat center / 100% 100%;
}
#character {
  position: absolute;
  top: 0%;
  left: 0%;
  height: 100%;
  width: 100%;
  background: url(images/big_bg/bg_lobby.jpg) no-repeat center / 100% 100%;
  z-index: 30;
}
#character .warr_info_bg {
  position: absolute;
  top: 0%;
  left: 3.4%;
  height: 25%;
  width: 51%;
  background: url(images/clt_new/warr_info_bg.png) no-repeat left top / 100% 100%;
  z-index: 50;
}
#character .fix_left_collect {
  position: absolute;
  top: 0%;
  left: -1.5%;
  height: 100%;
  width: 5%;
  background: url(images/fixscreens/fix_left_collect.png) no-repeat left top / 100% 100%;
  z-index: 40;
}
#character #close {
  position: absolute;
  top: 0%;
  right: 0%;
  height: 18%;
  width: 12%;
  background: url(images/close.png) no-repeat center / 100% 100%;
  z-index: 30;
}
#character .warr_search_btn {
  position: absolute;
  top: 0%;
  right: 13%;
  height: 8%;
  width: 12%;
  background: url(images/clt_new/warr_search_btn.png) no-repeat center / 100% 100%;
  z-index: 30;
}
#character #pub_corner_bg {
  position: absolute;
  bottom: 0%;
  right: -3.7%;
  height: 20%;
  width: 15%;
  background: url(images/publicui1/pub_corner_bg.png) no-repeat center / 100% 100%;
}
#character #pub_corner_bg #pubbtn_menu {
  position: absolute;
  bottom: 16%;
  left: 20%;
  height: 41%;
  width: 26%;
  background: url(images/publicui1/pubbtn_menu.png) no-repeat center / 100% 100%;
}
#character .top {
  position: absolute;
  top: 19%;
  left: 2.1%;
  height: 28%;
  width: 13%;
  list-style: none;
  padding: 0;
  margin: 0%;
  z-index: 100;
}
#character .top #popular {
  height: 53%;
  width: 115%;
}
#character .top #all {
  margin-top: -13%;
  height: 53%;
  width: 115%;
}
#character .top li {
  display: flex;
  justify-content: center;
  align-items: center;
  color: #c1b199;
  font-family: "shousha";
  background: url(images/clt_new/btn_lvl1_1.png) no-repeat center / 100% 100%;
}
#character .top i {
  position: absolute;
  margin-top: -8%;
  font-style: normal;
  font-size: 1.5rem;
}
#character .top span {
  margin-top: 14%;
  font-size: 0.9rem;
}
#character .top .active {
  background: url(images/clt_new/btn_lvl1_2.png) no-repeat center / 100% 100%;
}
#character .bottom {
  position: absolute;
  top: 42%;
  left: 2.1%;
  height: 57%;
  width: 15%;
  list-style: none;
  padding: 0;
  margin: 0%;
  z-index: 100;
  overflow: scroll;
}
#character .bottom li {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 25%;
  width: 100%;
  margin-top: -12;
  color: #c1b199;
  font-family: "shousha";
  font-size: 1.2rem;
  background: url(images/clt_new/btn_lvl2_1.png) no-repeat center / 100% 100%;
}
#character .bottom li:first-child {
  margin-top: 0%;
}
#character .bottom .active {
  background: url(images/clt_new/btn_lvl2_2.png) no-repeat center / 100% 100%;
}
#character .sort {
  position: absolute;
  top: 22%;
  right: 2.1%;
  height: 63%;
  width: 15%;
  padding: 0;
  margin: 0%;
  z-index: 100;
  overflow: scroll;
}
#character .sort div {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 25%;
  width: 100%;
  margin-top: -12;
  color: #c1b199;
  font-family: "shousha";
  font-size: 1.2rem;
  background: url(images/clt_new/clt_lvl3_btn_off.png) no-repeat center / 100% 100%;
}
#character .sort div:first-child {
  margin-top: 0%;
}
#character .sort .active {
  background: url(images/clt_new/clt_lvl3_btn_fg.png) no-repeat center / 100% 100%;
}
#character .sort .top-sort {
  height: 25%;
  width: 65%;
  margin-left: 10%;
}
#character .dec {
  position: absolute;
  top: 16.4%;
  left: 14.3%;
  height: 25%;
  width: 6%;
  background: url(images/clt_new/warr_info_dec.png) no-repeat center / 100% 100%;
}
#character .center {
  position: absolute;
  top: 11%;
  left: 18.2%;
  height: 84%;
  width: 64%;
  padding-top: 1.6%;
  overflow: scroll;
}
#character .center .character {
  position: relative;
  height: 37.3%;
  width: 18%;
  margin-left: 7%;
  margin-bottom: 4%;
  background: url(images/pubchara/chara_face_frame_shu.png) no-repeat center / 100% 100%;
}
#character .center .character .primary-avatar {
  position: relative;
  margin-top: -14.8%;
  margin-left: 16.6%;
  height: 109.2%;
  width: 80.7%;
  background: url('') no-repeat center / 100% 100%;
}
#character .center .character:nth-child(4n + 1) {
  margin-left: 3%;
}
#character .center .name {
  position: absolute;
  top: 15%;
  left: 3.7%;
  width: 0.9em;
  color: #f8efd8b8;
  font-size: 1.1em;
  line-height: 0.95;
  text-align: center;
  white-space: pre-wrap;
  font-family: 'shousha';
}
